<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>流水账后台系统管理</title>
<link rel="stylesheet" type="text/css" href="/static/plugins/layui/css/layui.css">
<link rel="stylesheet" type="text/css" href="/static/css/common/common.css">
<style type="text/css">
.layui-form-label{
    float: left;
    display: block;
    padding: 9px 15px;
    width: 80px;
    font-weight: 400;
    font-size: large;
    line-height: 27px;
    text-align: right;
}
.layui-input-inline span{
    position: relative;
    top: 10px;
    color: crimson;
    font-size: large;
}
</style>
</head>
<body class="layui-layout-body">
	<div class="layui-layout layui-layout-admin">
		<!-- header nav部分 -->
		<div th:insert="~{/common/common :: copy}"></div>
		<div class="layui-body">
			<div class="layui-fluid layui-from-consider">
				<h2 class="title">查询</h2>
				<div class="layui-row">
					<div class="layui-col-md12">
						<form class="layui-form" id="queryForm">
							<div class="layui-row">
								<div class="layui-col-md4">
									<div class="layui-form-item">
										<label class="layui-form-label">登陆账号</label>
										<div class="layui-input-inline">
											<input type="text" name="userAccount" id="userAccount"  autocomplete="off" class="layui-input">
										</div>
									</div>
								</div>
								<div class="layui-col-md4">
									<div class="layui-form-item">
										<label class="layui-form-label">用户姓名</label>
										<div class="layui-input-inline">
											<input type="text" name="realName" id="realName" autocomplete="off" class="layui-input">
										</div>
									</div>
								</div>
								<div class="layui-col-md4">
									<div class="layui-form-item">
										<label class="layui-form-label">电话</label>
										<div class="layui-input-inline">
											<input type="text" name="phone" id="phone" autocomplete="off" class="layui-input">
										</div>
									</div>
								</div>
							</div>
							<div class="layui-row">
								<div class="layui-form-item">
									<div class="layui-input-block">
										 <input type="button" value="查询" class="layui-btn" id="queryUser"></input>
										 <button class="layui-btn" id="addUser">增加</button>
									</div>
								</div>
							</div>
						</form>
					</div>
				</div>
			</div>
			<div class="layui-fluid layui-from-consider info">
				<h2 class="title">用户列表</h2>
				<div class="layui-row">
					<table class="layui-hide" id="userTable" lay-filter="userTable"></table>
				</div>
			</div>
		</div>
	</div>
</body>
<script type="text/javascript" src="/static/js/jquery-3.5.1.min.js"></script>
<script type="text/javascript" src="/static/plugins/layui/layui.all.js"></script>
<script type="text/javascript" src="/static/js/common/common.js"></script>
<script>
	//JavaScript代码区域
	layui.use(['layer','form','table'], function(){
		var form = layui.form,
		layer = layui.layer,
		table = layui.table;
		
		//监听提交
		form.on('submit(userForm)', function(data){
			var params = $('#addForm').serializeArray();
			
			$.ajax({
				url: '/user/add/user',
				type: 'post',
				data: params,
				beforeSend : function () {
	            	this.layerIndex = layer.load(0, { shade: [0.5, '#393D49'] });
	          	},
				success : function(data) {
					layer.close(this.layerIndex);
					layer.msg(data.message);
					window.location.reload();
				},
				complete : function () {
					layer.close(this.layerIndex);
				}				
			});
			return false;
		});
		
		//查询用户信息
		$('#queryUser').click(function(){
			var params = $('#queryForm').serializeArray();
			
			$.ajax({
				url: '/user/query',
				type: 'post',
				data: params,
				beforeSend : function () {
	            	this.layerIndex = layer.load(0, { shade: [0.5, '#393D49'] });
	          	},
				success : function(data) {
					layer.close(this.layerIndex);
				},
				complete : function () {
					layer.close(this.layerIndex);
				}
			})
		});
		
		//增加用户信息
		$('#addUser').click(function(){
			layer.open({
				  title: '增加用户',
				  offset: '100px',
				  area: '500px',
				  anim: 1,
				  content: '<div class="layui-fluid layui-from-consider info">'
						+'<h2 class="title">用户新增</h2>'
						+'<div class="layui-row">'
						+'<div class="layui-col-md12">'
						+'<form class="layui-form" id="addForm">'
						+'<div class="layui-row">'
						+'<div class="layui-form-item">'
						+'<label class="layui-form-label">登陆账号</label>'
						+'<div class="layui-input-inline">'
						+'<input type="text" name="userAccount" required  lay-verify="required" placeholder="请输入账号" autocomplete="off" class="layui-input">'
						+'</div>'
						+'</div>'
						+'</div>'		
						+'<div class="layui-row">'
						+'<div class="layui-form-item">'
						+'<label class="layui-form-label">真实姓名</label>'
						+'<div class="layui-input-inline">'
						+'<input type="text" name="realName" required  lay-verify="required" placeholder="请输入姓名" autocomplete="off" class="layui-input">'
						+'</div>'
						+'</div>'
						+'</div>'		
						+'<div class="layui-row">'
						+'<div class="layui-form-item">'
						+'<label class="layui-form-label">电话</label>'
						+'<div class="layui-input-inline">'
						+'<input type="text" name="phone" required  lay-verify="required|phone" placeholder="请输入电话" autocomplete="off" class="layui-input">' 
						+'</div>'
						+'</div>'
						+'</div>'
						+'<div class="layui-row">'
						+'<div class="layui-form-item">'
						+'<div class="layui-input-block">'
						+'<button class="layui-btn" lay-submit lay-filter="userForm">提交</button>'
						+'</div>'
						+'</div>'
						+'</div>'		
						+'</form>'
						+'</div>'
						+'</div>'
						+'</div>'
			}); 
			return false;
		});
		
		// 查询
		$('#queryUser').click(function(){
			var userAccount = $('#userAccount').val();
			var realName = $('realName').val();
			var phone = $('#phone').val();
			
			dtt = {
					userAccount : userAccount,	
					realName : realName,
					phone : phone
			};
			initTable(dtt);
		});
		
		var dtt = {};
		initTable(dtt);
		function initTable(dtt){
			table.render({
				elem: '#userTable',
				height: 480,
				url:'/user/query/user/list',
				page: false, //开启分页
		        totalRow: false, //开启合计行
		        limit:10,
		        where: dtt,
		        method:'POST',
				cols: [ [ //表头
					{field:'userId', title:'userId', fixed: 'left', unresize: true,hide: true},
					{field:'userAccount', title:'登陆账户',  unresize: true},
					{field:'realName', title:'用户姓名',  unresize: true},
					{field:'phone', title:'电话',  unresize: true}
				] ],
				page: {
					layout: ['count', 'prev', 'page', 'next', 'skip'], //自定义分页布局
					groups: 5, //只显示 1 个连续页码
					first: '首页', //不显示首页
					last: '尾页', //不显示尾页
					elem:'bottomPage'
				},
				parseData: function(res){
					return {
		                "code": res.code, //解析接口状态
		                "msg": res.message, //解析提示文本
		                "count": res.count, //解析数据长度
		                "data": res.data //解析数据列表
		     	   };
				},
				response: {
	  	    	    statusName: 'code' //规定数据状态的字段名称，默认：code
	  	    	    ,statusCode: 0 //规定成功的状态码，默认：0
	  	    	    ,msgName: 'msg' //规定状态信息的字段名称，默认：msg
	  	    	    ,countName: 'count' //规定数据总数的字段名称，默认：count
	  	    	    ,dataName: 'data' //规定数据列表的字段名称，默认：data
	      	  	}, 
				done: function(res){
					
				}
			});
		}
		
		
	});
</script>
</html>
